<template>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
            aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand" href="#"><img src="../../assets/expre_login.png" alt="" width="200"></a>
            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="/">主页 <span class="sr-only">(home)</span></a>
                </li>
                <li class="nav-item">
                    <router-link to="/sample" id="samplepage">示例页</router-link>
                </li>
                <li class="nav-item" id="nav-item-create">
                    <router-link to="/register"><button type="button"
                            class="btn btn-outline-primary">创建账号</button></router-link>
                </li>
                <li class="nav-item" id="nav-item-login">
                    <router-link to="/login"><button type="button" class="btn btn-outline-success">登录</button></router-link>
                </li>
            </ul>

        </div>
    </nav>
    <hr>
</template>

<script>
export default {
    name: "HeadingComponent"
}

</script>

<style scoped>
/* 居中展示 */
.navbar-collapse {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 水平间距为50px */
.navbar-nav .nav-item {
    margin-right: 50px;
}



hr {
    border: none;
    border-top: 1px solid #090909;
    margin-bottom: 35px;
}

#samplepage {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
}
</style>